<template>
  <div class="page">
    <el-tree
      ref="treeRef2"
      
      :props="defaultProps"
      :lazy="true"
      :load="handleLoad2"
       @node-click="handleNodeClick2"
     >

    </el-tree>
    <ekTree
      ref="treeRef"
      :data="data"
      :defaultProps="defaultProps"
      @node-click="handleNodeClick"
      :defaultExpandAll="false"
      :lazy="true"
      :load="handleLoad"
      :showCheckbox="true"
    >
      <!-- <template #default="{ node, data }"> 
            <span>{{ node.label }}uuu</span>
           
        </template>   -->
    </ekTree>
  </div>
</template>

<script setup>
import {
  defineComponent,
  onMounted,
  getCurrentInstance,
  reactive,
  ref,
} from "vue";

import ekTree from "@/components/business/ekTree/index.vue";

import { useStore } from "vuex";
import { useRouter } from "vue-router";

const {
  appContext: {
    config: { globalProperties },
  },
} = getCurrentInstance();
const { $storage, $http } = globalProperties;
const store = useStore();
const router = useRouter();
let defaultProps = {
  children: "children",
  label: "label",
  isLeaf: 'isLeaf',
  disabled: 'disabled',
  class:'class'
};
let data = [
  {
    label: "Level one 1",
    children: [
      {
        label: "Level two 1-1",
        children: [
          {
            label: "Level three 1-1-1",
          },
        ],
      },
    ],
  },
  {
    label: "Level one 2",
    children: [
      {
        label: "Level two 2-1",
        children: [
          {
            label: "Level three 2-1-1",
          },
        ],
      },
      {
        label: "Level two 2-2",
        children: [
          {
            label: "Level three 2-2-1",
          },
        ],
      },
    ],
  },
  {
    label: "Level one 3",
    children: [
      {
        label: "Level two 3-1",
        children: [
          {
            label: "Level three 3-1-1",
          },
        ],
      },
      {
        label: "Level two 3-2",
        children: [
          {
            label: "Level three 3-2-1",
          },
        ],
      },
    ],
  },
];
function handleNodeClick(node) {
  console.log( treeRef.value.getNode(2),'yyyyyyyyyyy');
 
}
function handleNodeClick2(node) {
  console.log( treeRef2.value.getNode(2),'yyyyyyyyyyy');
 
}
function handleLoad( node, resolve, reject ) {
  if (node.level === 0) {
    return resolve([{id:'1', label: 'region' }])
  }
  if (node.level > 1) return resolve([])

  setTimeout(() => {
    const data= [
      {
        id:'2',
        label: 'leaf',
        isLeaf: true,
      },
      {
        id:'3',
        label: 'zone',
      },
    ]
    resolve(data)
  }, 500)
}
function handleLoad2( node, resolve ) {
    console.log(node, resolve ,'jjjjjjjjjjjj')
  if (node.level === 0) {
    return resolve([{id:'1', label: 'region' }])
  }
  if (node.level > 1) return resolve([])

  setTimeout(() => {
    const data= [
      {
        id:'2',
        label: 'leaf',
        isLeaf: true,
      },
      {
        id:'3',
        label: 'zone',
      },
    ]
    resolve(data)
  }, 500)
}
const treeRef = ref(null);
const treeRef2 = ref(null);
</script>

<style scoped lang="scss">
.page {
  background-color: #f4f4f4;
}
</style>
